import { useEffect, useRef, useState } from 'react';
import './App.css';
import icon from './assets/Tomato.png'

const App = () => {
  const title = "TomatoClock"
  const [workTime, setWorkTime] = useState(0);
  const [input, setInput] = useState(25);
  const countingRef = useRef(0);
  const [countingTime, setCountingTime] = useState("");
  const [type, setType] = useState("🍅 番茄钟");
  const [showCountingTime, setShowSetCountingTime] = useState(false);

  const clear = () => {
    document.title = "🍅 番茄钟";
    setType("🍅 番茄钟");
    clearInterval(countingRef.current)
    setShowSetCountingTime(false)
  }
  useEffect(() => {
    Notification.requestPermission().then(p => console.log(p));
  }, [])
  const workTimeUp = () => {
    const options = {
      body: "工作时间结束，休息一下",
      icon: icon,
      requireInteraction: true
    };
    setWorkTime(workTime + 1)
    clear()
    if (!("Notification" in window)) {
      alert("当前浏览器不支持桌面通知");
    } else if (Notification.permission === "granted") {
      return new Notification(title, options);
    } else if (Notification.permission !== "denied") {
      Notification.requestPermission().then((permission) => {
        return new Notification(title, options);
      });
    }
  }

  const breakTimeUp = () => {
    const options = {
      body: "休息时间结束,继续搬砖吧！",
      icon: icon
    };
    clear()
    if (!("Notification" in window)) {
      alert("当前浏览器不支持桌面通知");
    } else if (Notification.permission === "granted") {
      return new Notification(title, options);
    } else if (Notification.permission !== "denied") {
      Notification.requestPermission().then((permission) => {
        return new Notification(title, options);
      });
    }
  }

  const formatCountingTime = (min, type) => {
    clearInterval(countingRef.current);
    let title = "🍅 工作中";
    if (type == 'work') {
      setType('工作中');
    } else {
      setType('休息中')
      title = "🍅 休息中";
    }
    document.title = title;
    setShowSetCountingTime(true);
    let secs = min * 60;
    countingRef.current = setInterval(() => {
      let sec = secs--
      setCountingTime(sec);
      if (secs <= 0) {
        clearInterval(countingRef.current);
        setShowSetCountingTime(false)
        if (type == 'work') {
          workTimeUp();
        } else {
          breakTimeUp();
        }
      }
    }, 1000);
  }

  const handleInputNumber = (event) => {
    setInput(event.target.valueAsNumber)
  }

  const startWork = () => {
    formatCountingTime(input, 'work');
  }
  const startBreak = (min) => {
    formatCountingTime(min, 'break');
  }

  return (
    <div className="content">
      <h1>{type}</h1>
      {showCountingTime && <h4>{countingTime}</h4>}
      <div className='input-box'>
        <span className='tip'>分钟:</span>
        <input value={input} className='input' aria-label='时长' type='number' onInput={handleInputNumber} />
      </div>

      <div className='btns'>
        <button className='btn' onClick={startWork}>开始工作</button>
        <button className='btn' onClick={() => startBreak(5)}>休息5分钟</button>
        <button className='btn' onClick={() => startBreak(10)}>休息10分钟</button>
        <button className='btn' onClick={clear}>重置</button>
      </div>
    </div>
  );
};

export default App;
